<!--
 * @Author: linsiyu 1937169691@qq.com
 * @Date: 2023-11-20 20:28:29
 * @LastEditors: linsiyu 1937169691@qq.com
 * @LastEditTime: 2024-01-13 19:59:10
 * @FilePath: \dongwukejixueyuan\html\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%Ashou'ye
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css -->
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <!-- icon -->
    <link rel="icon" href="#">
    <title>四川农业大学省级水产类实验教学中心</title>
</head>

<body>
    <!-- 顶部 -->
    <div id="green"></div>
    <div class="header container">
        <div class="top">
            <img src="../image/logo(1).png" alt="四川农业大学省级水产类实验教学中心">
            <div class="text-center">&nbsp;四川省水产类实验教学中心</div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="container nav">
        <div class="row text-center list">
            <div class="col-xs-12 col-sm-4 col-md-1" id="index">
                <span><a href="./index.html">
                        <div class="glyphicon glyphicon-home">&nbsp;</div>中心首页
                    </a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/gaikuang.html">中心概况</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/shizi.html">师资队伍</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/jiaoxue.html">教学管理</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/kexue.html">科学研究</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/rencai.html">人才培养</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/shehui.html">社会服务</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/tiaojian.html">条件支撑</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="./children/yunxing.html">运行管理</a></span>
            </div>
        </div>
    </div>
    <!-- 主体部分 -->
    <div class="main container">
        <!-- 轮播图 -->
        <div class="banner col-xs-12 col-sm-12 col-md-6">
            <div class="photolist">
                <a href="#" class="item active"><img src="../image/new1.jpg" alt="动物科技学院"></a>
                <a href="#" class="item"><img src="../image/new2.jpg" alt="动物科技学院"></a>
                <a href="#" class="item"><img src="../image/new3.jpg" alt="动物科技学院"></a>
                <a href="#" class="item"><img src="../image/new4.jpg" alt="动物科技学院"></a>
                <a href="#" class="item"><img src="../image/new5.jpg" alt="动物科技学院"></a>
            </div>
            <div class="pointlist">
                <span class="point active" data-index=0></span>
                <span class="point" data-index=1></span>
                <span class="point" data-index=2></span>
                <span class="point" data-index=3></span>
                <span class="point" data-index=4></span>
            </div>
            <div class="btn glyphicon glyphicon-chevron-left" id="leftBtn"></div>
            <div class="btn glyphicon glyphicon-chevron-right" id="rightBtn"></div>
            <script>
                var items = document.getElementsByClassName("item");
                var points = document.getElementsByClassName("point");
                var left = document.getElementById("leftBtn");
                var right = document.getElementById("rightBtn");
                var all = document.querySelector("banner");
                var index = 0; //index大小表示现在显示哪一张图片
                var bannertime = 0;
                console.log(items)
                var clearActive = function () {
                    for (i = 0; i < items.length; i++) {
                        items[i].className = 'item';
                    }
                    for (i = 0; i < points.length; i++) {
                        points[i].className = 'point';
                    }
                }
                //改变active
                var goIndex = function () {
                    clearActive();
                    items[index].className = 'item active';
                    points[index].className = 'point active';
                }
                //左按钮事件
                var goLeft = function () {
                    if (index == 0) {
                        index = 4;
                    } else {
                        index--;
                    }
                    goIndex();
                }
                //右按钮事件
                var goRight = function () {
                    if (index < 4) {
                        index++;
                    } else {
                        index = 0;
                    }
                    goIndex();
                }
                //绑定点击事件
                left.addEventListener('click', function () {
                    goLeft();
                })

                right.addEventListener('click', function () {
                    goRight();
                })

                for (i = 0; i < points.length; i++) {
                    points[i].addEventListener('click', function () {
                        var pointIndex = this.getAttribute('data-index')
                        index = pointIndex;
                        goIndex();
                    })
                }
                var bannertimer;
                function autoTime() {
                    //timer接收定时器
                    bannertimer = setInterval(function () {
                        bannertime++;
                        if (bannertime === 4) {
                            goRight();
                        }
                        else if (bannertime > 4) {
                            bannertime = 0;
                        }
                    }, 800);
                }
                // 调用轮播图自动播放方法
                autoTime();
            </script>
        </div>
        <!-- 新闻列表 -->
        <div class="news col-xs-12 col-sm-12 col-md-6">
            <h4 class="glyphicon glyphicon-list"></h4>
            <h3>新闻动态</h3><a href="./indexchildren/morexinwen.html" id="more">更多</a>
            <ul>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
                <li><span>[11.30]</span><a href="./indexchildren/xinwen.html"><span
                            id="cate">【新闻分类】</span>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</a></li>
            </ul>
        </div>
    </div>
    <!-- 中下部分 -->
    <div class="zhongxia container">
        <!-- 通知公告 -->
        <div class="tongzhi">
            <h3 class="glyphicon glyphicon-tags">&nbsp;通知公告</h3><span><a href="./indexchildren/moretongzhi.html"
                    id="more">更多</a></span>
            <div id="content">
                <div>
                    <span>11-30</span><small>2023</small>
                    <p><a href="./indexchildren/tongzhi.html">通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容</a>
                    </p>
                </div>
                <div>
                    <span>11-30</span><small>2023</small>
                    <p><a href="./indexchildren/tongzhi.html">通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容</a>
                    </p>
                </div>
                <div>
                    <span>11-30</span><small>2023</small>
                    <p><a href="./indexchildren/tongzhi.html">通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容通知公告内容</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 学术报告 -->
        <div class="tongzhi">
            <h3 class="glyphicon glyphicon-tags">&nbsp;学术报告</h3><span><a href="./indexchildren/morexueshu.html"
                    id="more">更多</a></span>
            <div id="jiangzuo">
                <div>
                    <a href="./indexchildren/jiangzuo.html">
                        <strong>【讲座预告】SichuannongyedaxuedongwukejixueyuanSichuannongyedaxuedongwukejixueyuanSichuannongyedaxuedongwukejixueyuan</strong>
                        <p><span class="glyphicon glyphicon-user" style="font-size: 1.5rem;"></span>主讲人:Yohn</p>
                        <p><span class="glyphicon glyphicon-time" style="font-size: 1.5rem;"></span>时间:2023-11-30</p>
                        <p><span class="glyphicon glyphicon-map-marker"
                                style="font-size: 1.5rem;"></span>地点:四川农业大学第十教学楼A区小礼堂室</p>
                    </a>
                </div>
                <div>
                    <a href="./indexchildren/jiangzuo.html">
                        <strong>【讲座预告】SichuannongyedaxuedongwukejixueyuanSichuannongyedaxuedongwukejixueyuanSichuannongyedaxuedongwukejixueyuan</strong>
                        <p><span class="glyphicon glyphicon-user" style="font-size: 1.5rem;"></span>主讲人:Yohn</p>
                        <p><span class="glyphicon glyphicon-time" style="font-size: 1.5rem;"></span>时间:2023-11-30</p>
                        <p><span class="glyphicon glyphicon-map-marker"
                                style="font-size: 1.5rem;"></span>地点:四川农业大学第十教学楼A区小礼堂室</p>
                    </a>
                </div>
                <div>
                    <a href="./indexchildren/jiangzuo.html">
                        <strong>【讲座预告】SichuannongyedaxuedongwukejixueyuanSichuannongyedaxuedongwukejixueyuanSichuannongyedaxuedongwukejixueyuan</strong>
                        <p><span class="glyphicon glyphicon-user" style="font-size: 1.5rem;"></span>主讲人:Yohn</p>
                        <p><span class="glyphicon glyphicon-time" style="font-size: 1.5rem;"></span>时间:2023-11-30</p>
                        <p><span class="glyphicon glyphicon-map-marker"
                                style="font-size: 1.5rem;"></span>地点:四川农业大学第十教学楼A区小礼堂室</p>
                    </a>
                </div>
            </div>
        </div>

    </div>
    <!-- 底部 -->
    <div class="down">
        <div class="container">
            <div>办公地址：成都市温江区惠民路211号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮编：611130</div>
            <div>联系方式：028-86291010</div>
            <div>版权信息：四川农业大学 动物科技学院 版权所有</div>
        </div>
    </div>

</body>

</html>